<template>
  <div class="pa-12">
    <div class="flex-start">
      <div style="width: 100px; text-align: right" class="m-r-10">时间</div>
      <div class="flex-center" style="width: 400px;">
        <el-date-picker v-model="installDate" class="m-r-10" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"/>
        <el-time-picker v-model="installTime" placeholder="选择时间" value-format="HH:mm:ss"/>
      </div>
    </div>
    <div class="flex-start m-t-10">
      <div style="width: 100px; text-align: right" class="m-r-10">安装人员</div>
      <select-filling-operation-user-button button-type="btn" size="large" style="width: 400px" @select="(v) => {form.staffName = v.name}"/>
<!--      <app-dept-user-select size="large" style="width: 400px" dept-name="维修部" @change="(v) => {form.staffName = v}"/>-->
    </div>
    <div class="flex-start m-t-10">
      <div style="width: 100px; text-align: right" class="m-r-10">选择加注站</div>
      <el-button type="primary" plain style="width: 400px;" @click="showSelectFillingStation">
        {{ form.siteName === '' ? '点击选择加注站' : form.siteName }}
      </el-button>
    </div>
    <div class="flex-start m-t-10 flex-align-items-unset">
      <div style="width: 100px; text-align: right" class="m-r-10">备注</div>
      <el-input style="width: 400px;" type="textarea" :rows="3" v-model="form.remark"/>
    </div>
    <div class="dividing-line m-t-20 m-b-20"></div>
    <div class="flex-end">
      <el-button size="small" type="primary" plain @click="doCancel">取消</el-button>
      <el-button size="small" type="primary" @click="doConfirm" :loading="submitLoading">确定</el-button>
    </div>

    <el-dialog title="安装加注机" append-to-body :visible.sync="showSelectFillingStationFlag" width="1000px">
      <dispenser-select-content @change="stationChange" v-if="showSelectFillingStationFlag"
                                      @hide="showSelectFillingStationFlag= false"/>
    </el-dialog>
  </div>
</template>

<script>
import dispenserSelectContent from "@/views/stake/dispenser-select-content.vue";
import {installFillingMachine} from "@/api/business/filling-machine"
import {isStringEmpty, msgError, msgSuccess} from "@/util/common-util";
import AppDeptUserSelect from "@/components/business/app-dept-user-select";
import SelectFillingOperationUserButton from "@/components/business/select-filling-opreation-user-button";

export default {
  name: "filling-machine-install-content",
  components: {SelectFillingOperationUserButton, AppDeptUserSelect, dispenserSelectContent},
  props: {
    machineId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showSelectFillingStationFlag: false,
      submitLoading: false,
      installDate: '',
      installTime: '',
      form: {
        splitTime: '',// 安装与拆除时间
        siteName: '',//加注站名称
        fillSiteId: null,// 加注站id
        staffName: '',// 安装人员
        machineId: '', // 加注机id
        installType: 0, //安装
        remark: ''
      }
    }
  },
  created() {
    this.form.machineId = this.machineId
  },
  methods: {
    back(flag) {
      this.$emit('hide', flag)
    },
    showSelectFillingStation() {
      this.showSelectFillingStationFlag = true
    },
    stationChange(_station) {
      this.form.siteName = _station.siteName
      this.form.fillSiteId = _station.id
    },
    doCancel() {
      this.back()
    },
    doConfirm() {
      if (isStringEmpty(this.installDate)) return msgError("选择安装日期")
      if (isStringEmpty(this.installTime)) return msgError("选择安装时间")
      if (isStringEmpty(this.form.siteName)) return msgError("选择加注站点")

      this.form.splitTime = this.installDate + ' ' + this.installTime
      this.submitLoading = true
      installFillingMachine(this.form).then(res => {
        this.submitLoading = false
        msgSuccess()
        this.back(true)
      }).catch(() => {
        this.submitLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
